<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!-- 定义默认链接地址与打开方式，“_blank”方式对搜索引擎不友好 -->
    <base target="_blank">
    <!--定义页面字符集，常见中文字符集 GBK  GB2312 -->
    <meta charset="UTF-8">
    <!-- 响应式，移动端网页显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- IE渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 网页描述 SEO -->
    <meta name="description" content="#">
    <!-- 网页关键字 SEO -->
    <meta name="keywords" content="#">
    <!-- 链接样式文件 -->
    <link rel="stylesheet" href="#">
    <!-- 定义网页图标，和收藏夹中显示图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 网页标题，具有html语义的作用 -->
    <title>Web用户界面</title>
    <style>
        .view_gitee {
            width: 1012px;
        }

        .view_gitee ul,
        .view_gitee li {
            margin: 0;
            padding: 0;
        }

        .view_gitee a {
            text-decoration: none;
        }

        .view_gitee a:hover {
            background-color: springgreen;
        }

        .view_gitee ul {
            background-color: azure;
            height: 341px;
            padding: 5px;
            border: 1px solid sandybrown;
        }

        .view_gitee li {
            float: left;
            list-style: none;
            width: 184px;
            height: 29px;
            line-height: 30px;
            text-align: center;
            border-bottom: 1px dashed darksalmon;
            margin: 0 8px;

        }

        .view_gitee li>a {
            display: inline-block;
            width: 110px;
            text-align: center;
        }

        .view_gitee a+a {
            display: inline-block;
            margin-left: 4px;
            width: 66px;
            text-align: justify;
            text-align-last: justify;
            padding: 0 2px;

        }
    </style>
</head>

<body onload="checkLinks()">
    <h1>Web用户界面</h1>
    <h2>学号：20190202569 姓名：刘振宇</h2>
    <h3>课程内容</h3>
    <ul>
        <li><a href="html_base/htmlbase.html">HTML标签基础</a></li>
        <li><a href="html_base/table.html">表格标签</a></li>
        <li><a href="html_base/form.html">表单标签</a></li>
        <li><a href="html_base/semantic.html">语义标签</a></li>
        <li><a href="html_base/other.html">属性、颜色、其他</a></li>
        <li><a href="css_base/css_one.html">CSS基本语法</a></li>
        <li><a href="css_base/css_two.html">CSS继承与层叠</a></li>
        <li><a href="css_base/css_three.html">CSS选择器</a></li>
        <li><a href="css_base/css_four.html">CSS盒子模型</a></li>
        <li><a href="css_base/css_five.html">CSS盒子溢出、定位、浮动</a></li>
        <li><a href="css_base/css_six.html">CSS常见样式属性</a></li>
        <li><a href="css_base/menu.html">CSS导航菜单</a></li>
        <li><a href="css_base/layout_one.html">CSS页面布局技术概览</a></li>
        <li><a href="css_base/layout_two.html">CSS页面布局-定宽模式</a></li>
        <li><a href="css_base/layout_three.html">CSS页面布局-自适应宽度模式(2列)</a></li>
        <li><a href="css_base/layout_four.html">CSS页面布局-自适应宽度模式(3列)</a></li>
        <li><a href="css_base/layout_five.html">CSS页面布局-固定宽度网格(栅格)系统</a></li>
        <li><a href="css_base/layout_six.html">CSS页面布局-自适应宽度网格(栅格)系统</a></li>
        <li><a href="css_base/layout_seven.html">CSS页面布局-响应式设计</a></li>
    </ul>

    <br>
    <br>
    <br>
    <br>

    <script>
        function checkLinks() {
            var myCollection = document.getElementsByTagName("a");
            for (i = 0; i < myCollection.length; i++) {
                if (myCollection[i].href.indexOf("#") != -1) {
                    // myCollection[i].style = "cursor:default;color:gainsboro;";
                    myCollection[i].style.color = "gainsboro";
                    myCollection[i].style.cursor = "default";
                    myCollection[i].target = "_self";
                }

            }
        }
    </script>
</body>

</html>